<template>
<div class="wrapper">
    <swiper :options="swiperOption"  v-if="showSwiperList">
    <!-- slides -->
    <swiper-slide v-for="item of swiperList" :key="item.id">
     <img  class="swiper-img"  :src="item.imgUrl" >
      </swiper-slide>
    <!-- Optional controls -->
    <div class="swiper-pagination"  slot="pagination"></div>
  </swiper>
</div>
</template>
<script>
// import 'swiper/dist/css/swiper.css'
export default {
  name: "homeSwiper",
  props:{
    swiperList:Array
  },
  data() {
    return {
      swiperOption: {
        pagination: ".swiper-pagination",
        loop:true,
        observer: true, //修改swiper自己或子元素时(DOM)，D自动初始化swiper .
        //例如V-SHOW的时候，DOM结点会发生变化。swiper需要重新计算长宽。要不会卡顿一下会。 所以需要用到这两个属性去监听
        observeParents: true, //修改swiper的父元素时(DOM)，自动初始化swiper
      }
    };
  },
  computed:{
    /*
      避免在HTML中做过多的运算。 可以在computed运算。 效率高
      因为不加此判断的话。 一开始会传空的数据进来。 会导致数组的顺序不对。 这个可以控制
    */
    showSwiperList(){
      return this.swiperList.length
    }
  }
};
</script>
<style lang="stylus" scoped>
/*
  Vue是一个数据驱动的框架
  网速慢的时候  设置 network online 点击切换成3G网络，弄慢速度
  如果不写下面的内容，会导致轮播图下面的内容，一开始就会顶在轮播图的位置，等轮播图出来了才会移动到下面。算一个BUG
  下面这样的样式写法，会把图片自适应。 而且等下面的div字体出来的时候。 位置也会和原来不变
  其实 height:31.25vw 也可以。 简洁方便，但是兼容性不是很高。下面的兼容性高
  padding-bottom 为图片宽长比例的百分比
  .wrapper >>> .swiper-pagination-bullet-active
  background #fff
  因为CSS用了scoped去封住了样式。 所以我们在下面单独改swiper的样式是没用的。 但是又不想把scoped去掉。因为这个可能会影响其它组件的样式
  所以可以在本页面用
  最大的div >>> 修改的swiper类
  然后修改样式  这样的话就可以成功修改了
*/
.wrapper >>> .swiper-pagination-bullet-active {
  background: #fff;
}

.wrapper {
  width: 100%;
  overflow: hidden;
  // height 31.25vw;
  height: 0;
  background: #eee;
  padding-bottom: 30%; // 图片的宽高比

  .swiper-img {
    width: 100%;
  }
}
</style>


